<script setup>

import router from "@/router";
import {CloseBold, Lock, User, Message, EditPen} from "@element-plus/icons-vue";
import { ref} from "vue";
import {ElMessage} from "element-plus";
import {post, register, get} from "@/net";

const form = ref({
    username: '',
    password: '',
    password_repeat: '',
    email: '',
    code: ''
})

const validateUsername = (rule, value, callback) => {
    if (value === '')
        callback(new Error('请输入用户名'))
    else if (!/^[A-Za-z0-9\u4e00-\u9fa5]+$/.test(value))
        callback(new Error('用户名只能包含中/英文'))
    else
        callback()
}
const validatePassword = (rule, value, callback) => {
    if (value === '')
        callback(new Error('请确认密码'))
    else if (value !== form.value.password)
        callback(new Error('两次输入密码不一致!'))
    else
        callback()
}

const rule = {
    username: [
        { validator: validateUsername, trigger: ['blur', 'change'] },
        { max: 24, message: '用户名长度不能大于24个字符', trigger: ['blur', 'change'] },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '密码长度必须在6-16之间', trigger: ['blur', 'change'] },
    ],
    password_repeat: [
        { validator: validatePassword, trigger: ['blur', 'change'] },
        { min: 6, max: 16, message: '密码长度必须在6-16之间', trigger: ['blur', 'change'] },
    ],
    email: [
        { required: true, message: '请输入邮箱地址', trigger: ['blur', 'change'] },
        { type: 'email', message: '请输入合法的邮箱地址', trigger: ['blur', 'change'] },
    ],
    code: [
        {required: true, message: '请输入验证码', trigger: 'blur' }
    ]
}

const formRef = ref()
const coldTime = ref(0)
const isEmailValidate = ref(false)

const onValidate = (prop, isValid) => {
    if (prop === 'email')
        isEmailValidate.value = isValid
}

const registerAccount = () => {
    formRef.value.validate((isValid) => {
        if (isValid){
            register("/api/auth/register", {
                username: form.value.username,
                password: form.value.password,
                email: form.value.email,
                code: form.value.code
            }, (message) => {
                ElMessage.success(message)
                setTimeout(() => router.push("/login"), 1500)
            })
        } else {
            ElMessage.warning('请填写完整注册信息')
        }
    })
}

const sendValidEmail = () => {
    post("/api/auth/valid-register-email",{
        email: form.value.email
    }, (success) => {
        ElMessage.success(success)
        coldTime.value = 60
        setInterval(() => coldTime.value--, 1000)
    })
}
</script>

<template>
    <div class="register-div">
        <div class="flex gap-1">
            <div class="flex-grow"></div>
            <button style="
                    margin: 5px 5px 0 0;
                    padding: .5rem .5rem .1rem .1rem;
                    color: #2f2e2e;
                    border-radius: 3px 30px 3px 3px;
                    border-color: white;
                    background-color: white;
                    " @click="router.push('/')">
                <el-icon style="font-size: 1.2rem"><CloseBold /></el-icon>
            </button>
        </div>
        <h1 style="margin-top: 20px;font-size: 30px">注&nbsp;册</h1>
        <div class="flex flex-col gap-1 form-out-div">
            <el-form :model="form" :rules="rule" @validate="onValidate" ref="formRef">
                <el-form-item prop="username">
                    <el-input type="text" v-model="form.username" placeholder="用户名">
                        <template #prefix>
                            <el-icon><User /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="form.password" placeholder="密码" :show-password="true">
                        <template #prefix>
                            <el-icon><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password_repeat">
                    <el-input type="password" v-model="form.password_repeat" placeholder="确认密码" :show-password="true">
                        <template #prefix>
                            <el-icon><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input type="email" v-model="form.email" placeholder="邮箱地址">
                        <template #prefix>
                            <el-icon><Message /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-row :gutter="10" style="width: 100%">
                        <el-col :span="17">
                            <el-input v-model="form.code" :maxlength="6" type="text" placeholder="请输入验证码">
                                <template #prefix>
                                    <el-icon><EditPen /></el-icon>
                                </template>
                            </el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-button class="code-btn" type="primary"
                                       :disabled="coldTime > 0 || !isEmailValidate" @click="sendValidEmail">
                                {{ coldTime > 0? '请稍后' + coldTime + '秒': '发送验证码'}}
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
            <el-button class="register-btn" type="primary" style="
            width: 80%;
            margin: 50px auto 0 auto;" @click="registerAccount">立即注册</el-button>
        </div>
    </div>
</template>

<style scoped>
    .register-div {
        position: absolute;
        left: 36.1vw;
        width: 400px;
        height: 600px;
        margin-top: 30px;
        margin-left: 50px;
        text-align: center;
        color: white;
        border: 3px solid white;
        border-radius: 30px;
        backdrop-filter: blur(.4rem);
        overflow: hidden;
    }
    .form-out-div {
        margin-top: 70px;
        padding: 0 30px;
    }
    .code-btn {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 1rem;
    }


    @media screen and (max-width: 768px) {
        .register-div {
            left: 9vw;
            width: 350px;
            height: 550px;
            justify-content: center;
            margin-top: 10px;
            margin-left: 0;
        }
        .form-out-div {
            margin-top: 40px;
        }
        .register-btn {
            margin-top: 30px;
        }
        .code-btn {
            padding-left: 5px;
            padding-right: 5px;
            font-size: inherit;
        }
    }

</style>